<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		.form-group label {
			color: #666;
		}
		.article-statistics {
			max-width: 100%;
			width: 950px;
			height: 700px;
		}
		@media (min-width: 768px) { 
			.form-inline .form-group {
				margin-bottom: 30px;
			} 
		}
		.modal-1000 {
			width: 1000px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="form-inline">
			<div class="form-group col-sm-3">
				<label for="startDateTime">开始时间：</label>
				<input id="startDateTime" value="" class="form-control" type="text" value="" readonly="readonly" />
			</div>
		  	<div class="form-group col-sm-3">
				<label for="endDateTime">结束时间：</label>
				<input id="endDateTime" class="form-control" type="text" value="" readonly="readonly" />
			</div>
			<div id="showDepartment" class="form-group col-sm-3">
				<label for="departmentSt">部门选择：</label>
				<select id="departmentSt" class="form-control">
					<option value="">--全部部门--</option>
				</select>
			</div>
			<div class="form-group col-sm-3">
				<label for="isRedPack">是否加持红包：</label>
				<select id="isRedPack" class="form-control">
					<option value="0">全部</option>
					<option value="1">有红包</option>
					<option value="2">无红包</option>
				</select>
			</div>
			<div class="form-group col-sm-3">
				<button type="button" id="queryStatistics" style="width: 120px;" class="btn btn-default btn-theme">查询</button>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div>
			<table id="acticleList" class="table table-bordered table-hover table-striped">
					<thead>
						<tr>
							<th>序号</th>
							<th>文章预览</th>
							<th>文章名称</th>
							<th>作者</th>
							<th>观看次数</th>
							<th>转发人数</th>
							<th>点赞人数</th>
							<th>阅读人数</th>
							<th>发布时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<nav id="page" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
		</div>
	</div>
	<div class="modal fade bs-example-modal-lg" id="articleBarModel" tabindex="-1" role="dialog" aria-labelledby="articleBarModelLabel">
		<div class="modal-dialog modal-lg modal-1000" role="document">
			<div class="modal-content">
				<div class="modal-header">
			    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			    	<h4 class="modal-title" id="articleBarModelLabel">文章统计图</h4>
				</div>
			  	<div class="modal-body">
					<div id="articleStatistics" class="article-statistics"></div>			    
			  	</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.fr.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/echarts.min.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		var userID,companyID,roleType,pageNo=1;
		var articleStatistics = echarts.init(document.getElementById('articleStatistics'));
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			roleType = $.cookie("roleType");
			initDataTime();
			if (roleType == 1) {
				base.postData(base.url.getDepartAndEmployeeList, {userID:userID,companyID:companyID}, callbackGetDepartAndEmployeeList);
			}else{
				$("#showDepartment").hide();
				initStatistics();
			}
		});
		function callbackGetDepartAndEmployeeList(data) {
			if (data.success) {
				var departList = data.context.departList;
		        var options 
		        for (var i=0; i<departList.length; i++) {
		            options += '<option value="'+departList[i].departID+'">'+departList[i].departName+'</option>';
		        }
				$("#departmentSt").append(options);
				initStatistics();
			} else {
				toastr.warning(data.msg);
			}
		}
		function initDataTime(){
			$('#startDateTime').val(addDate(base.getNowFormatToday(),-30));
			$('#endDateTime').val(base.getNowFormatToday());
			$('#startDateTime').datetimepicker({
				format:'yyyy-mm-dd',
				language:'zh-CN',
		        weekStart: 1,
		        todayBtn:  true,
				autoclose: true,
				startView: 2,
				minView: 2,
				forceParse: 0,
		        showMeridian: true
			});		
			$('#endDateTime').datetimepicker({
				format:'yyyy-mm-dd',
				language:'zh-CN',
		        weekStart: 1,
		        todayBtn:  true,
				autoclose: true,
				startView: 2,
				minView: 2,
				forceParse: 0,
		        showMeridian: true
			});
		}
		function initStatistics(){
			var data = {
				userID:userID,
				companyID:companyID,
				sectionID:$("#departmentSt").val(),
				timeLowerLimit:$("#startDateTime").val(),
				timeUpperLimit:$("#endDateTime").val(),
				isRedPack:$("#isRedPack").val(),
				roleType:roleType,
				pageNo:pageNo
			}
			base.postData(base.url.articleStatisticsList, data, callbackArticleStatisticsList);
		}
		function callbackArticleStatisticsList(data){
			if (data.success){
				var html = '';
				for (var i=0; i<data.context.contentsRedPackList.length; i++) {
					html += pinContentsList(data.context.contentsRedPackList[i],i+1);
				}
				$("#acticleList tbody").html(html);
				if (pageNo == 1){
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage,//总页数
						onPageClick: function(page) {
							$("#page").initPage(page);
							pageNo = page.currentPage;
							initStatistics();
			    			return false;  //默认的翻页事件
					    }
					};
					$("#page").initPage(page);
				}
			} else {
				toastr.warning(data.msg);
			}
		}
		function pinContentsList(data,i){
			var html = '<tr>';
				html +=	'	<td>'+i+'</td>';
				html += '	<td><img class="border-radius-30" src="'+data.articleImage+'" /></td>';
				html +=	'	<td>'+data.articleTitle+'</td>';
				html +=	'	<td>'+data.author+'</td>';
				html +=	'	<td>'+data.readNum+'</td>';
				html +=	'	<td>'+data.transmitNum+'</td>';
				html +=	'	<td>'+data.likeNum+'</td>';
				html +=	'	<td>'+data.readNumberOfPeople+'</td>';
				html +=	'	<td>'+data.publishDate+'</td>';
				html +=	'	<td><input type="hidden" name="articleID" value="'+data.articleID+'" /><button class="btn btn-default">详情</button></td>';
			return html;
		}
		$("#queryStatistics").click(function(){
			pageNo = 1;
			initStatistics();
		});
		$("#acticleList tbody").on("click", ".btn-default", function(){
			var articleID = $(this).closest("tr").find("input[name='articleID']").val();
			base.postData(base.url.articleStatisticsOne, {articleID:articleID,companyID:companyID}, callbackArticleStatisticsOne);
		});
/*		$("#acticleList tbody").on("mouseover mouseout", "tr", function(event){
			if(event.type == "mouseover"){
				//鼠标悬浮
				var articleID = $(this).find("input[name='articleID']").val();
				base.postData(base.url.articleStatisticsOne, {articleID:articleID,companyID:companyID}, callbackArticleStatisticsOne);
			}else if(event.type == "mouseout"){
				//鼠标离开
//				$('#articleBarModel').modal('hide');
//				$(this).find(".floating-layer").css("opacity", "0");
			}
		});*/
		function callbackArticleStatisticsOne(data){
			if (data.success){
				$('#articleBarModel').modal('show');
				option = {
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : data.context.dateNameList,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'标签数量',
				            type:'bar',
				            barWidth: '60%',
				            data:data.context.dateList
				        }
				    ]
				};
				articleStatistics.setOption(option);
			} else {
				toastr.warning(data.msg);
			}
		}
		
		function addDate(date,days){ 
	       	var d=new Date(date); 
	       	d.setDate(d.getDate()+days); 
	       	var month=d.getMonth()+1; 
	       	var strDate = d.getDate();
	       	if (month >= 1 && month <= 9) {
		        month = "0" + month;
		   	}
		    if (strDate >= 0 && strDate <= 9) {
		        strDate = "0" + strDate;
		   	}
	       	return d.getFullYear()+'-'+month+'-'+strDate; 
	    }
	</script>
</body>
</html>
